<template>
  <div class="category-selector bg-white p-5 w-full">
    <!-- 提示信息 -->
    <div class=" text-gray-400 mb-2 flex items-center bg-gray-100 p-3 space-x-2">
      <el-icon color="#409efc">
        <Warning />
      </el-icon>
      <span> 发布须知：准确选择类目有利于商品曝光，促进转化；若错放类目将会导致流量降权或下架整改、其他违规处理。查看发布攻略</span>
    </div>

    <!-- <el-alert type="info" :closable="false" title="发布须知：准确选择类目有利于商品曝光，促进转化；若错放类目将会导致流量降权或下架整改、其他违规处理。查看发布攻略">

    </el-alert> -->

    <!-- 最近使用的分类 -->
    <div class="recent-category mt-5 mb-5">
      <div class="recent-title font-bold mb-2">最近使用的分类</div>
      <div class="recent-tags flex flex-wrap gap-2">
        <el-tag v-for="tag in recentCategories" :key="tag.id" closable @close="handleClose(tag)"
          @click="handleTagClick(tag)">
          {{ tag.name }}
        </el-tag>
        <button class="text-blue-500 hover:text-blue-700" @click="clearRecent">清空</button>
      </div>
    </div>

    <!-- 选择分类 -->
    <div class="category-section mt-5">
      <h3 class="mb-4 text-base font-medium">选择分类</h3>
      <div class="search-box mb-4">
        <el-input v-model="searchKeyword" placeholder="请输入关键词搜索分类" prefix-icon="el-icon-search"
          @change="handleSearch"></el-input>
      </div>

      <div class="category-container flex border border-gray-200 rounded overflow-hidden">
        <!-- 一级分类 -->
        <div class="left-categories w-48 border-r border-gray-200 bg-gray-50">
          <el-menu :defaultActive="active1" class="left-menu" @select="handleLeftSelect">
            <el-menu-item v-for="(category, index) in leftCategories" :key="category.id" :index="index.toString()">
              <i v-if="category.hasSub" class="el-icon-arrow-right mr-1 transition-transform duration-300"
                :class="{ 'transform rotate-90': category.expanded }"></i>
              {{ category.name }}
            </el-menu-item>
          </el-menu>
        </div>

        <!-- 二级分类 -->
        <div class="right-categories flex-1" v-if="selectedCategory">
          <el-menu :defaultActive="active2" class="right-menu" @select="handleRightSelect">
            <el-menu-item v-for="(subCategory, index) in selectedCategory.subCategories" :key="subCategory.id"
              :index="index.toString()">
              <i v-if="subCategory.hasSub" class="el-icon-arrow-right mr-1 transition-transform duration-300"
                :class="{ 'transform rotate-90': subCategory.expanded }"></i>
              {{ subCategory.name }}
            </el-menu-item>
          </el-menu>
        </div>

        <!-- 三级分类 -->
        <div class="third-categories flex-1" v-if="selectedSubCategory">
          <el-menu :defaultActive="active3" class="third-menu" @select="handleThirdSelect">
            <el-menu-item v-for="(thirdCategory, index) in selectedSubCategory.subCategories" :key="thirdCategory.id"
              :index="index.toString()">
              {{ thirdCategory.name }}
            </el-menu-item>
          </el-menu>
        </div>
      </div>
    </div>

    <div class="selected-category mt-5 p-2 bg-gray-50 rounded">
      <span>已选分类：</span>
      <span>{{ selectedPath }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";

// 分类数据
const leftCategories = ref([
  { id: 1, name: "男鞋", hasSub: true, expanded: false },
  { id: 2, name: "女鞋", hasSub: true, expanded: false },
  { id: 3, name: "童鞋", hasSub: true, expanded: false },
]);

// 二级分类数据
const subCategories = ref({
  1: [
    { id: 11, name: "单鞋", hasSub: true, expanded: false },
    { id: 12, name: "高跟鞋", hasSub: true, expanded: false },
    { id: 13, name: "凉鞋", hasSub: true, expanded: false },
    { id: 14, name: "拖鞋", hasSub: true, expanded: false },
    { id: 15, name: "靴子", hasSub: true, expanded: false },
  ],
  2: [
    { id: 16, name: "单鞋", hasSub: true, expanded: false },
    { id: 17, name: "运动鞋", hasSub: true, expanded: false },
    { id: 18, name: "凉鞋", hasSub: true, expanded: false },
    { id: 19, name: "拖鞋", hasSub: true, expanded: false },
    { id: 20, name: "靴子", hasSub: true, expanded: false },
  ],
  3: [
    { id: 21, name: "学步鞋", hasSub: true, expanded: false },
    { id: 22, name: "运动鞋", hasSub: true, expanded: false },
    { id: 23, name: "凉鞋", hasSub: true, expanded: false },
  ],
});

// 三级分类数据
const thirdLevelCategories = ref({
  11: [
    { id: 111, name: "商务正装单鞋" },
    { id: 112, name: "休闲单鞋" },
    { id: 113, name: "驾车单鞋" },
  ],
  12: [
    { id: 121, name: "细跟高跟鞋" },
    { id: 122, name: "粗跟高跟鞋" },
    { id: 123, name: "坡跟高跟鞋" },
  ],
  16: [
    { id: 161, name: "平底单鞋" },
    { id: 162, name: "中跟单鞋" },
    { id: 163, name: "厚底单鞋" },
  ],
  17: [
    { id: 171, name: "跑步鞋" },
    { id: 172, name: "篮球鞋" },
    { id: 173, name: "训练鞋" },
  ],
  21: [
    { id: 211, name: "软底学步鞋" },
    { id: 212, name: "步前鞋" },
  ],
  22: [
    { id: 221, name: "儿童跑鞋" },
    { id: 222, name: "儿童篮球鞋" },
  ],
});

// 选中的一级分类
const selectedCategory = ref(null);
const active1 = ref('0')
// 选中的二级分类
const selectedSubCategory = ref(null);
const active2 = ref('0')
const active3 = ref('0')


// 当前选择的路径
const selectedPath = ref("");

// 最近使用的分类
const recentCategories = ref([
  { id: 111, name: "女鞋 > 单鞋 > 平底单鞋" },
  { id: 112, name: "女鞋 > 运动鞋 > 跑步鞋" },
  { id: 113, name: "男鞋 > 单鞋 > 商务正装单鞋" },
  { id: 114, name: "童鞋 > 学步鞋 > 软底学步鞋" },
  { id: 115, name: "女鞋 > 靴子 > 马丁靴" },
]);
const handleTagClick = (tag) => {
  console.log(tag);
  let tags = tag.name.split(" > ")
  console.log(tags, tags[0])
  //处理分类中被选中的 
  console.log(active1.value, leftCategories.value.findIndex(item => item.name === tags[0]).toString());
  active1.value = leftCategories.value.findIndex(item => item.name === tags[0]).toString()
  active2.value = leftCategories.value.findIndex(item => item.name === tags[1]).toString()
  active3.value = leftCategories.value.findIndex(item => item.name === tags[2]).toString()
  console.log(active1.value);
  //处理分类部分


  selectedPath.value = tag.name
};

// 搜索推荐的关键词
const searchKeyword = ref("");

// 左侧一级分类选择处理
const handleLeftSelect = (index) => {
  const category = leftCategories.value[index];
  if (category.hasSub) {
    // 设置选中状态
    selectedCategory.value = {
      id: category.id,
      name: category.name,
      subCategories: subCategories.value[category.id] || [],
    };
    selectedSubCategory.value = null;
    selectedPath.value = category.name;
  }
};

// 右侧二级分类选择处理
const handleRightSelect = (index) => {
  const subCategory = selectedCategory.value.subCategories[index];
  if (subCategory.hasSub) {
    // 设置选中状态
    selectedSubCategory.value = {
      id: subCategory.id,
      name: subCategory.name,
      subCategories: thirdLevelCategories.value[subCategory.id] || [],
    };
    selectedPath.value = `${selectedCategory.value.name} > ${subCategory.name}`;
  }
};

// 三级分类选择处理
const handleThirdSelect = (index) => {
  const thirdCategory = selectedSubCategory.value.subCategories[index];
  selectedPath.value = `${selectedCategory.value.name} > ${selectedSubCategory.value.name} > ${thirdCategory.name}`;
};

// 搜索结果处理
const handleSearch = (keyword) => {
  console.log("搜索关键词:", keyword);
};

// 关闭最近使用的分类标签
const handleClose = (tag) => {
  recentCategories.value = recentCategories.value.filter(
    (item) => item.id !== tag.id
  );
};

// 清空最近使用的分类
const clearRecent = () => {
  recentCategories.value = [];
};
</script>

<style scoped>
/* 保留必要的 Element UI 组件样式覆盖 */
.el-menu-item {
  padding: 10px 20px;
}

.el-icon-arrow-right {
  margin-right: 5px;
  transition: transform 0.3s;
}
</style>